<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../swiper-bundle.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <!-- Demo styles -->
    <style>
        html,




        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 80%;
            height: 80%;
            object-fit: cover;
        }



        .swiper {
            width: 70%;
            height: 300px;
            margin-left: auto;
            margin-right: auto;
        }

        .swiper-slide {
            background-size: cover;
            background-position: center;
        }

        .mySwiper2 {
            height: 80%;
            width: 100%;
        }

        .mySwiper {
            height: 20%;
            box-sizing: border-box;
            padding: 10px 0;
        }

        .mySwiper .swiper-slide {
            width: 25%;
            height: 100%;
            opacity: 0.4;
        }

        .mySwiper .swiper-slide-thumb-active {
            opacity: 1;
        }

        .swiper-slide img {
            display: block;
            width: 80%;
            height: 80%;
            object-fit: cover;
        }

        .swiper-button-prev:after,
        .swiper-button-next:after {
            color: rgb(145, 140, 140);
        }

        .swiper-button-prev,
        .swiper-rtl .swiper-button-next {
            left: -2px;
        }

        .swiper-button-next,
        .swiper-rtl .swiper-button-prev {
            right: -2px;
        }
    </style>
</head>

<body>
    <!-- Swiper -->

    <div id="swiper111" style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
        class="swiper mySwiper2 swiper-initialized swiper-horizontal swiper-pointer-events">
        <div class="swiper-wrapper" id="swiper-wrapper-d2101a1053fb623d108" aria-live="polite"
            style="transform: translate3d(-1546px, 0px, 0px); transition-duration: 0ms;">
            <div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="9" role="group"
                aria-label="10 / 10" style="width: 1536px; margin-right: 10px;">
                <img src="https://img0.baidu.com/it/u=3307765823,1934426814&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500">
            </div>
            <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" role="group" aria-label="1 / 10"
                style="width: 1536px; margin-right: 10px;">
                <img src="https://img1.baidu.com/it/u=3836940140,2086440641&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
            </div>
            <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" role="group" aria-label="2 / 10"
                style="width: 1536px; margin-right: 10px;">
                <img src="https://img2.baidu.com/it/u=3818864831,2860829309&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="2" role="group" aria-label="3 / 10"
                style="width: 1536px; margin-right: 10px;">
                <img src="https://img1.baidu.com/it/u=2688422801,1696196797&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="3" role="group" aria-label="4 / 10"
                style="width: 1536px; margin-right: 10px;">
                <img src="https://img1.baidu.com/it/u=246144837,3632090542&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=360">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="4" role="group" aria-label="5 / 10"
                style="width: 1536px; margin-right: 10px;">
                <img src="https://img0.baidu.com/it/u=1186933237,429450095&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="5" role="group" aria-label="6 / 10"
                style="width: 1536px; margin-right: 10px;">
                <img src="https://img2.baidu.com/it/u=2728831079,2286134054&fm=253&fmt=auto&app=120&f=JPEG?w=891&h=500">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="6" role="group" aria-label="7 / 10"
                style="width: 1536px; margin-right: 10px;">
                <img src="https://img2.baidu.com/it/u=483975611,455345814&fm=253&fmt=auto&app=120&f=JPEG?w=530&h=276">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="7" role="group" aria-label="8 / 10"
                style="width: 1536px; margin-right: 10px;">
                <img src="https://img0.baidu.com/it/u=3196988119,1673463884&fm=253&fmt=auto&app=138&f=JPEG?w=236&h=177">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="8" role="group" aria-label="9 / 10"
                style="width: 1536px; margin-right: 10px;">
                <img src="https://img0.baidu.com/it/u=2894162413,3104291693&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500">
            </div>
            <div class="swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="9" role="group"
                aria-label="10 / 10" style="width: 1536px; margin-right: 10px;">
                <img src="https://img0.baidu.com/it/u=3307765823,1934426814&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500">
            </div>
            <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="0"
                role="group" aria-label="1 / 10" style="width: 1536px; margin-right: 10px;">
                <img src="https://img1.baidu.com/it/u=3836940140,2086440641&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
            </div>
        </div>
        <!-- <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-d2101a1053fb623d108"></div>
        <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-d2101a1053fb623d108"></div> -->
        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
    </div>
    <div thumbsslider=""
        class="swiper mySwiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-free-mode swiper-thumbs">
        <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"
            aria-controls="swiper-wrapper-d2101a1053fb623d108"></div>
        <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"
            aria-controls="swiper-wrapper-d2101a1053fb623d108"></div>
        <div class="swiper-wrapper" id="swiper-wrapper-0298471574a771105" aria-live="polite"
            style="transform: translate3d(-1546px, 0px, 0px); transition-duration: 0ms;">
            <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="6" role="group"
                aria-label="7 / 10" style="width: 376.5px; margin-right: 10px;">
                <img src="https://img2.baidu.com/it/u=483975611,455345814&fm=253&fmt=auto&app=120&f=JPEG?w=530&h=276">
            </div>
            <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="7" role="group"
                aria-label="8 / 10" style="width: 376.5px; margin-right: 10px;">
                <img src="https://img0.baidu.com/it/u=3196988119,1673463884&fm=253&fmt=auto&app=138&f=JPEG?w=236&h=177">
            </div>
            <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="8" role="group"
                aria-label="9 / 10" style="width: 376.5px; margin-right: 10px;">
                <img src="https://img0.baidu.com/it/u=2894162413,3104291693&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500">
            </div>
            <div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="9" role="group"
                aria-label="10 / 10" style="width: 376.5px; margin-right: 10px;">
                <img src="https://img0.baidu.com/it/u=3307765823,1934426814&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500">
            </div>

            <div class="swiper-slide swiper-slide-visible swiper-slide-active swiper-slide-thumb-active"
                data-swiper-slide-index="0" role="group" aria-label="1 / 10"
                style="width: 376.5px; margin-right: 10px;">
                <img src="https://img1.baidu.com/it/u=3836940140,2086440641&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
            </div>

            <div class="swiper-slide swiper-slide-visible swiper-slide-next" data-swiper-slide-index="1" role="group"
                aria-label="2 / 10" style="width: 376.5px; margin-right: 10px;">
                <img src="https://img2.baidu.com/it/u=3818864831,2860829309&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500">
            </div>
            <div class="swiper-slide swiper-slide-visible" data-swiper-slide-index="2" role="group" aria-label="3 / 10"
                style="width: 376.5px; margin-right: 10px;">
                <img src="https://img1.baidu.com/it/u=2688422801,1696196797&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
            </div>
            <div class="swiper-slide swiper-slide-visible" data-swiper-slide-index="3" role="group" aria-label="4 / 10"
                style="width: 376.5px; margin-right: 10px;">
                <img src="https://img1.baidu.com/it/u=246144837,3632090542&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=360">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="4" role="group" aria-label="5 / 10"
                style="width: 376.5px; margin-right: 10px;">
                <img src="https://img0.baidu.com/it/u=1186933237,429450095&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="5" role="group" aria-label="6 / 10"
                style="width: 376.5px; margin-right: 10px;">
                <img src="https://img2.baidu.com/it/u=2728831079,2286134054&fm=253&fmt=auto&app=120&f=JPEG?w=891&h=500">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="6" role="group" aria-label="7 / 10"
                style="width: 376.5px; margin-right: 10px;">
                <img src="https://img2.baidu.com/it/u=483975611,455345814&fm=253&fmt=auto&app=120&f=JPEG?w=530&h=276">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="7" role="group" aria-label="8 / 10"
                style="width: 376.5px; margin-right: 10px;">
                <img src="https://img0.baidu.com/it/u=3196988119,1673463884&fm=253&fmt=auto&app=138&f=JPEG?w=236&h=177">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="8" role="group" aria-label="9 / 10"
                style="width: 376.5px; margin-right: 10px;">
                <img src="https://img0.baidu.com/it/u=2894162413,3104291693&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500">
            </div>
            <div class="swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="9" role="group"
                aria-label="10 / 10" style="width: 376.5px; margin-right: 10px;">
                <img src="https://img0.baidu.com/it/u=3307765823,1934426814&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500">
            </div>
            <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active swiper-slide-thumb-active"
                data-swiper-slide-index="0" role="group" aria-label="1 / 10"
                style="width: 376.5px; margin-right: 10px;">
                <img src="https://img1.baidu.com/it/u=3836940140,2086440641&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
            </div>
            <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="1"
                role="group" aria-label="2 / 10" style="width: 376.5px; margin-right: 10px;">
                <img src="https://img2.baidu.com/it/u=3818864831,2860829309&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500">
            </div>
            <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2" role="group"
                aria-label="3 / 10" style="width: 376.5px; margin-right: 10px;">
                <img src="https://img1.baidu.com/it/u=2688422801,1696196797&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
            </div>
            <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="3" role="group"
                aria-label="4 / 10" style="width: 376.5px; margin-right: 10px;">
                <img src="https://img1.baidu.com/it/u=246144837,3632090542&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=360">
            </div>


        </div>
        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
    </div>

    <!-- Swiper JS -->
    <script src="../swiper-bundle.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            loop: true,
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesProgress: true,
            autoplay: {
                delay: 1000, //1秒切换一次
            },
        });
        var swiper2 = new Swiper(".mySwiper2", {
            loop: true,
            spaceBetween: 10,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            thumbs: {
                swiper: swiper,
            },
            autoplay: {
                delay: 1000, //1秒切换一次
            },
        });



        //       var mySwiper = new Swiper('#swiper111', {
        //       autoplay: {
        //       delay: 1000,//1秒切换一次
        //   },

        // });
    </script>


</body>

</html>